:root {
  --rate-color: var(--color-text);
  --rate-size: 24px;
  --rate-disabled-color: var(--color-text-disabled);
  --rate-error-color: var(--color-danger);
  --rate-action-padding: 4px;
  --rate-primary-color: var(--color-primary);
}

.var-rate {
  display: flex;
  transform: translateX(calc(-1 * var(--rate-action-padding)));

  &__wrap {
    width: 100%;
  }

  &__content {
    position: relative;
    display: flex;
    padding: var(--rate-action-padding);
    cursor: pointer;
    border-radius: 50%;
    color: var(--rate-color);
    transition: color 0.25s;
    -webkit-tap-highlight-color: transparent;

    &-icon[var-rate-cover] {
      font-size: var(--rate-size);
    }
  }

  &--primary {
    color: var(--rate-primary-color);
  }

  &--disabled {
    color: var(--rate-disabled-color);
    cursor: not-allowed;
  }

  &--error {
    color: var(--rate-error-color);
  }
}
